<!-- 涂装报表页 （首页点击涂装后进入）-->
<template>
	<view style="background-color: #F5F8FF;">
		<view class="content-top">
			<!-- <view class="details-search"> -->
				<!-- <text class="search-month">统计月份：</text> -->
				<ruiDatePicker
					fields="month"
					start="1900-01"
					:end="date"
					:value="date"
					@change="bindChange"
					@cancel="bindCancelbindCancel"
				>
				</ruiDatePicker>
				<!-- <image  src="../../static/zlqx_gx_rq_s_icon.png" style="position: absolute; right: 40upx; width: 40upx;height: 40upx;" mode="scaleToFill"></image> -->
			<!-- </view> -->
			<view class="echart-title">
				<view class="title-name" @click="titleChange(1)">
					<text :class="[tabIndex===1 ? 'view-top-text-active' : 'view-top-text']">{{pos=='left' ? inter.finishedCP : inter.paintYield}}</text>
					<view :class="[tabIndex===1 ? 'title-underLine': '']"></view>
				</view>
				<view class="title-name" @click="titleChange(2)">
					<text :class="[tabIndex===2 ? 'view-top-text-active' : 'view-top-text']">{{pos=='left' ? inter.semiCP : inter.semiFinished}}</text>
					<view :class="[tabIndex===2 ? 'title-underLine': '']"></view>
				</view>
				<view class="title-name" @click="titleChange(3)">
					<text :class="[tabIndex===3 ? 'view-top-text-active' : 'view-top-text']">{{pos=='left' ? inter.FcarProducts : inter.fineMachining}}</text>
					<view :class="[tabIndex===3 ? 'title-underLine': '']"></view>
				</view>
			</view>
			<view class="echart">
				<mpvue-echarts :echarts="echarts" :onInit="lineInit" canvasId="line" ref="lineChart" />
			</view>
		</view>
		<scroll-view class="scroll-view" scroll-y>
			<view class="scroll-content">
				<view class="content-heart">
					<view class="scroll-top">
						<view class="left-top">
							<text style="color: #0C9CDC;font-size: 46upx;font-weight:bold;">{{productSum}}</text>
							<text style="color: #595959;font-size: 24upx;font-weight:400;">{{inter.ljcp}}</text>
						</view>
						<view class="middle-line"></view>
						<view class="left-top">
							<text style="color: #0C9CDC;font-size: 46upx;font-weight:bold;">{{productYield}}</text>
							<text style="color: #595959;font-size: 24upx;font-weight:400;">{{inter.dcl}}</text>
						</view>
					</view>
					<view class="data-list-name">
						<view class="left-line"></view>
						<text style="color: #2F2F2F;font-size: 28upx;font-weight:400;margin-left: 10upx;">{{inter.dataList}}</text>
					</view>
					<view class="list-header">
						<view class="list-cell">
							<text class="cell-top">{{inter.time}}</text>
							<text class="cell-bottom" v-if="pos=='left'">{{inter.sum}}</text>
						</view>
						<view class="list-cell">
							<text class="cell-top">{{pos=='left' ? inter.quantity : inter.cpl+'(%)'}}</text>
							<text class="cell-bottom" v-if="pos=='left'">{{totalNum}}</text>
						</view>
						<view class="list-cell">
							<text class="cell-top">{{pos=='left' ? inter.mbz : inter.mbz+'(%)'}}</text>
							<text class="cell-bottom" v-if="pos=='left'">{{totalTarget}}</text>
						</view>
					</view>
					<view class="list-body" v-for="(item,index) in listArr" :key="index" :class="[index%2==0?'iswhite':'isgray']">
						<view class="body-cell">
							<text>{{item.TimeLine}}</text>
						</view>
						<view class="body-cell">
							<text>{{item.sum}}</text>
						</view>
						<view class="body-cell">
							<text>{{item.Target}}</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import * as echarts from '@/components/echarts/echarts.min.js';
	import mpvueEcharts from '@/components/mpvue-echarts/src/echarts.vue';
	import ruiDatePicker from '@/components/rattenking-dtpicker/rattenking-dtpicker.vue'
	import $api from '@/api/api.js'
	import $inter from '@/api/international.js'
	
	function toPercent(num, total) { 
        return (Math.round(num / total * 1000) / 10.00 + "%");// 小数点后一位百分比
}
	function loadData(that){
		uni.showToast({
			title:'loading...',
			icon:'loading',
			mask:true
		})
		if(that.pos=='left'){
			$api.getProduct({
				PSCode:that.PSCode,
				Exc_Date:that.date +'-01'
			},res=>{
				console.log(JSON.stringify(res));
				processData(res,that)
				that.listArr = res
				that.productSum=that.totalNum
				that.productYield=toPercent(that.totalNum, that.totalTarget)
				uni.hideToast()
			},err=>{
				uni.showToast({
					title:that.inter.sjjzsb,
					icon:'none',
					mask:true
				})
			},e=>{
				
			})
		}else{
			$api.getProductYield({
				PSCode:that.PSCode,
				Exc_Date:that.date +'-01'
			},res=>{
				console.log(JSON.stringify(res));
				processData(res,that)
				that.listArr = res
				uni.hideToast()
			},err=>{
				uni.showToast({
					title:that.inter.sjjzsb,
					icon:'none',
					mask:true
				})
			},e=>{
				
			})
		}
	}
	function processData(data,that){
		that.xArr=[];
		that.sumArr=[];
		that.targetArr=[];
		that.totalNum=0;
		that.totalTarget=0;
		for (let i in data) {
			for (let j in data[i]) {
				if (j=='TimeLine') {
					that.xArr.push(data[i][j])
				}else if(j=='Target'){
					that.targetArr.push(data[i][j])
					that.totalTarget += data[i][j]
				}else{
					data[i].sum = data[i][j]
					that.sumArr.push(data[i][j])
					that.totalNum += data[i][j]
				}
			}
		}
		if (that.pos=='right') {
				lineOption.legend.data = [that.inter.cpl,that.inter.mbz]
				lineOption.series[0].name = that.inter.cpl
				lineOption.series[0].markLine.label.formatter = that.targetArr[0] + "%"
				lineOption.grid.left="10%"
				// lineOption.grid.right="14%"
			}else{
				lineOption.legend.data = [that.inter.quantity,that.inter.mbz]
				lineOption.series[0].name = that.inter.quantity
				lineOption.series[0].markLine.label.formatter = that.targetArr[0]
				lineOption.grid.left="16%"
			}
		lineOption.title.text = that.echartsTitle
		lineOption.xAxis[0].data = that.xArr
		lineOption.series[0].data = that.sumArr
		lineOption.series[0].markLine.data[0].yAxis =that.targetArr[0]
		lineOption.series[0].markLine.name=that.inter.mbz
		lineOption.series[0].markLine.data[0].name=that.inter.mbz
		that.$refs.lineChart.init();
		console.log(that.xArr);
		console.log(that.sumArr);
	}
	
	var lineOption = {
		title: {
			text: '',
			x: 'center',
			top:'0',
			textStyle:{
				color:'#ffffff',
				fontSize:'14',
				fontFamily:'PingFang-SC-Bold',
				fontWeight:'bold',
			}
		},
		
		legend: {
			data:['数量'],
			textStyle:{
				color:"#ffffff",
				fongSize:'11'
				},
			x: 'center',
			top:'10%'
		},
		tooltip : {
		    trigger: 'axis',
			position: function (pos, params, dom, rect, size) {
				return  pos[0]<200? [pos[0]+20, '50%'] : [pos[0]-110, '50%'];
			  }
		},
		 grid: {
		    left: '16%',
		    right: '14%',
		    bottom: '25%',
			top:"20%"
		},
		dataZoom: [{
		    	    show: true,
					// throttle:0,
		    	    start: 0,
		    	    end: 38,
					realtime:true,
					borderColor:'#0C9CDC',
					fillerColor:'rgba(255,255,255,0.2)',
					textStyle:{
						color:'#ffffff'
					}
		    	    }
					,{
						type: 'inside'
					}],
		xAxis : [
		    {
		        type : 'category',
				axisLine:{
					lineStyle:{
						color:"#ffffff"
					}
				},
				boundaryGap: false,     //x轴在0点开始显示
				splitLine:{show: false},
				data:[],
				}
		],
		yAxis : [
		    {
		        type : 'value',
				axisLine:{
					lineStyle:{
						color:"#ffffff"
					}
				},
				splitLine:{show: false}
		    }
		],
		series : [
		    {
				name: '数量',
		        type:'line',
				areaStyle: {
					color: {
	                    type: 'linear',
	                    x: 0,
	                    y: 0,
	                    x2: 0,
	                    y2: 1,
	                    colorStops: [{
	                        offset: 0, color: 'rgba(30,201,239,1)' // 0% 处的颜色
	                    }, {
	                        offset: 1, color: 'rgba(13,152,219,1)' // 100% 处的颜色
	                    }],
	                    global: false // 缺省为 false
	                }
				},
				markLine : { //添加目标值
					// symbol:"none", //去掉目标值最后面的箭头
					name:"目标值",
					silent:true,
					label:{
						position:"end", //将警示值放在哪个位置，三个值"start","middle","end" 开始 中点 结束
						formatter:  '',
						color:"#36B9BB",
						fontSize:12
					},
					data : [{
						silent:true, //鼠标悬停事件 true没有，false有
						lineStyle:{ //目标值的样式 ，虚实 颜色
							type:"solid",
							color:"#36B9BB"
						},
						name: '目标值',
						yAxis: ''
					}]
				},
				itemStyle : {  
	                            normal : { 
	                                color:'#06C8ED', 
	                                lineStyle:{  
	                                    color:'#06C8ED'  
	                                }  
	                            }  
	                        },
		        data:[]
			}
		]
		};
		
		
	export default{
		components: {mpvueEcharts,ruiDatePicker },
		data(){
			return{
				languageValue:'',
				internatinal:'',
				echarts: echarts,
				listArr:[],
				date:"2019-03",
				tabIndex:1,
				pos:"",
				echartsTitle:"涂装产成品",
				productSum:"",
				productYield:"",
				totalNum: 0,
				totalTarget: 0,
				PSCode:'P',
				xArr:[],
				sumArr:[],
				targetArr:[]
			}
		},
		onLoad() {
			uni.getStorage({
				key:'languageValue',
				success:(res)=>{
					this.languageValue = res.data
				}
			})
			
			
			this.pos=uni.getStorageSync('params').position;
			this.productSum=uni.getStorageSync('params').productSum;
			this.productYield=uni.getStorageSync('params').productYield;
			let tabBar=uni.getStorageSync('params').bar;
			this.date = $api.getCurrentMonthDate()
			this.titleChange(tabBar)
			// if (this.pos=='right') {
			// 	uni.setNavigationBarTitle({
			// 		title:'涂装成品率报表'
			// 	})
			// }else{
			// 	uni.setNavigationBarTitle({
			// 		title:'涂装产成品报表'
			// 	})
			// }
		},
		onUnload(){
			console.log('卸载了');
			this.xArr = []
			this.sumArr = []
			this.targetArr = []
			this.totalTarget = 0
			this.totalNum = 0
			lineOption.xAxis[0].data = this.xArr
			lineOption.series[0].data = this.sumArr
			lineOption.series[0].markLine.label.formatter = ''
			lineOption.series[0].markLine.data[0].yAxis = ''
			lineOption.title.text = ''
			this.$refs.lineChart.init();
		},
		methods: {
			lineInit(canvas, width, height) {
				let lineChart = echarts.init(canvas, null, {
					width: width,
					height: height
				})
				canvas.setChart(lineChart)
				lineChart.setOption(lineOption)
				return lineChart
			},
			bindDateChange: function(e) {
				this.date = e.target.value
			},
			bindChange(e){
				console.log(JSON.stringify(e));
				this.date = e
				loadData(this)
			},
			bindCancelbindCancel(){
				
			},
			titleChange(n){
				this.tabIndex=n;
				if(n==1){
					this.PSCode="P"
					this.echartsTitle = this.pos=='left' ? this.inter.finishedCP : this.inter.paintYield
					let barTitle=this.pos=='left' ? this.inter.tzccpReport : this.inter.tzccpY
					uni.setNavigationBarTitle({
						title:barTitle
					})
					loadData(this)
				}else if(n==2){
					this.PSCode="PS"
					this.echartsTitle = this.pos=='left' ? this.inter.semiCP : this.inter.semiFinished
					let barTitle=this.pos=='left' ? this.inter.semiCPReport : this.inter.semiY
					uni.setNavigationBarTitle({
						title:barTitle
					})
					loadData(this)
				}else{
					this.PSCode="FM"
					this.echartsTitle = this.pos=='left' ? this.inter.FcarProducts : this.inter.fineMachining
					let barTitle=this.pos=='left' ? this.inter.FcarReport : this.inter.FcarY
					uni.setNavigationBarTitle({
						title:barTitle
					})
					loadData(this)
				}
			}
		},
		computed:{
			inter(){
				return $inter.producting.charts
			}
		}
	}
</script>

<style>
	.content-top{
		background-color:#0C9CDC ;
		padding-top: 20upx;
	}
	.details-search{
		width: 700upx;
		height: 64upx;
		margin-left: 25upx;
		background-color: #3CAFE3;
		border-radius: 8upx;
		display: flex;
		align-items: center;
	}
	.search-month{
		font-size: 26upx;
		color: #FFFFFF;
		margin-left: 20upx;
	}
	.search-left{
		width: 500upx;
		display: flex;
		align-items: center;
	}
	.echart-title{
		width: 100%;
		height: 100upx;
		display: flex;
		font-size: 26upx;
	}
	.title-name{
		width: 250upx;
		height: 100upx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		
	}
	.view-top-text-active{
		color: #FFFFFF;
		margin-bottom: 8upx;
	}
	.view-top-text{
		color: #0371A2;
		margin-bottom: 8upx;
		
	}
	.title-underLine{
		background: #FFFFFF;
		width: 130upx;
		height: 5upx;
	}
	.echart{
		width: 100%;
		height: 530upx;
	}
	.scroll-view{
		height: calc(100vh - 723upx);
	}
	.scroll-content{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.content-heart{
		width: 708upx;
	}
	.scroll-top{
		width: 100%;
		height: 116upx;
		background:rgba(239,250,255,1);
		border-radius:16upx;
		border:2upx solid rgba(12,156,220,1);
		margin-top: 26upx;
		display: flex;
		align-items: center;
	}
	.left-top{
		width: 350upx;
		height: 116upx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.middle-line{
		width: 3upx;
		height: 92upx;
		background: #0C9CDC;
	}
	.left-line{
		width: 5upx;
		height: 26upx;
		background: #0C9CDC;
	}
	.data-list-name{
		display: flex;
		align-items: center;
		height: 90upx;
	}
	.list-header{
		width:100%;
		height:96upx;
		background:rgba(225,246,255,1);
		display: flex;
	}
	.list-cell{
		width: 236upx;
		height: 96upx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.list-body{
		width:100%;
		height:48upx;
		display: flex;
	}
	.body-cell{
		width: 236upx;
		height: 48upx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #5D5D5D;
		font-size: 24upx;
	}
	.cell-top{
		color: #2F2F2F;
		font-size: 26upx;
		font-weight:400;
	}
	.cell-bottom{
		color: #0C9CDC;
		font-size: 24upx;
		font-weight:400;
	}
	.iswhite{
		background: #FFFFFF;
	}
	.isgray{
		background: #F6F6F6;
	}
	.rui-class{
		color: #FFFFFF;
		border: 0upx;
		width: 500upx;
	}
</style>
